<template>
  <div class="nav-panel-wrapper" :style="cssObj">
    <h1 class="nav-panel-header">
      {{title}}
    </h1>
    <div class="nav-panel-content">
      <template v-for="(item, index) in navItems">
        <div class="nav-item-wrapper">
          <h1 class="nav-item-header">{{item.navTitle}}</h1>
          <ul class="nav-item-content">
            <li class="nav-item-detail" v-for="detail in item.details" @click="nav(detail.to)">
              {{detail.menuText}}
            </li>
          </ul>
        </div>
        <div class="nav-item-divide" v-if="index !== navItems.length-1"></div>
      </template>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {};
    },
    props: {
      navPanelInfo: {
        type: Object,
        default: function () {
          return {
            title: '全部组件',
            items: [{
              navTitle: '基础组件',
              details: [{
                menuText: '日期',
                to: {
                  name: 'publish'
                }
              }, {
                menuText: '计数器',
                to: {
                  name: 'publish'
                }
              }]
            }, {
              navTitle: '业务组件',
              details: [{
                menuText: '选择器',
                to: {
                  name: 'publish'
                }
              }, {
                menuText: '多选择器',
                to: {
                  name: 'publish'
                }
              }]
            }]
          };
        }
      },
      cssObj: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    computed: {
      title: function () {
        return this.navPanelInfo.title || '';
      },
      navItems: function () {
        return this.navPanelInfo.items || [];
      }
    },
    methods: {
      nav (to) {
        this.$router.push(to);
      }
    }
  };
</script>
<style scoped>
  .nav-panel-wrapper{
    box-sizing: border-box;
    width: 200px;
    font-size: 15px;
    text-align: left;
    background-color: rgba(255, 255, 255, 1);
  }
  .nav-panel-wrapper>
  .nav-panel-header{
    box-sizing: border-box;
    padding-left: 15px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 1);
    line-height: 35px;
    background-color: rgba(79, 192, 141, 1);
  }
  .nav-panel-wrapper>
  .nav-panel-content{
  }

  .nav-panel-wrapper>
  .nav-panel-content>
  .nav-item-divide{
    height: 0;
    border-top: 1px solid rgba(221, 221, 221, 1);
    margin-bottom: 20px;
  }
  .nav-panel-wrapper>
  .nav-panel-content>
  .nav-item-wrapper{
  }

  .nav-panel-wrapper>
  .nav-panel-content>
  .nav-item-wrapper>
  .nav-item-header{
    padding-left: 15px;
    font-weight: bold;
  }

  .nav-panel-wrapper>
  .nav-panel-content>
  .nav-item-wrapper>
  .nav-item-content{
    padding: 10px 15px;
  }

  .nav-panel-wrapper>
  .nav-panel-content>
  .nav-item-wrapper>
  .nav-item-content>
  li{
    padding: 5px;
    cursor: pointer;
  }

  .nav-panel-wrapper>
  .nav-panel-content>
  .nav-item-wrapper>
  .nav-item-content>
  li:hover{
    background-color: rgba(147, 222, 188, 1);
  }
</style>
